import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:jiyun_behavior/utils/app_theme.dart';
import 'package:jiyun_behavior/widgets/custom_button.dart';

class MembershipScreen extends StatefulWidget {
  const MembershipScreen({Key? key}) : super(key: key);

  @override
  State<MembershipScreen> createState() => _MembershipScreenState();
}

class _MembershipScreenState extends State<MembershipScreen> {
  int _selectedPackageIndex = 1;
  int _selectedPointsIndex = 1;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('会员中心'),
      ),
      body: SafeArea(
        child: SingleChildScrollView(
          child: Padding(
            padding: const EdgeInsets.all(16.0),
            child: Column(
              children: [
                _buildMembershipCard(),
                const SizedBox(height: 20),
                _buildMembershipPackages(),
                const SizedBox(height: 20),
                _buildPointsRecharge(),
                const SizedBox(height: 20),
                _buildPointsHistory(),
              ],
            ),
          ),
        ),
      ),
    );
  }

  Widget _buildMembershipCard() {
    return Container(
      padding: const EdgeInsets.all(20),
      decoration: BoxDecoration(
        gradient: const LinearGradient(
          colors: [AppTheme.primaryColor, Color(0xFFFF9F9F)],
          begin: Alignment.topLeft,
          end: Alignment.bottomRight,
        ),
        borderRadius: BorderRadius.circular(16),
      ),
      child: Column(
        children: [
          Row(
            children: [
              Container(
                width: 60,
                height: 60,
                decoration: BoxDecoration(
                  color: Colors.white,
                  shape: BoxShape.circle,
                  boxShadow: [
                    BoxShadow(
                      color: Colors.black.withOpacity(0.1),
                      blurRadius: 4,
                      offset: const Offset(0, 2),
                    ),
                  ],
                ),
                child: const Center(
                  child: Icon(
                    FontAwesomeIcons.crown,
                    size: 24,
                    color: AppTheme.primaryColor,
                  ),
                ),
              ),
              const SizedBox(width: 16),
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  const Text(
                    '黄金会员',
                    style: TextStyle(
                      fontSize: 18,
                      fontWeight: FontWeight.bold,
                      color: Colors.white,
                    ),
                  ),
                  const SizedBox(height: 4),
                  Text(
                    '有效期至：2023年12月31日',
                    style: TextStyle(
                      fontSize: 14,
                      color: Colors.white.withOpacity(0.8),
                    ),
                  ),
                ],
              ),
            ],
          ),
          const SizedBox(height: 20),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
              _buildMembershipStat('128', '福报值'),
              _buildMembershipStat('3', '咨询次数'),
              _buildMembershipStat('15', '抄经天数'),
            ],
          ),
          const SizedBox(height: 16),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              const Text(
                '会员特权 5/8',
                style: TextStyle(
                  fontSize: 14,
                  color: Colors.white,
                ),
              ),
              GestureDetector(
                onTap: () {
                  // 查看详情逻辑
                },
                child: Row(
                  children: [
                    const Text(
                      '查看详情',
                      style: TextStyle(
                        fontSize: 14,
                        color: Colors.white,
                      ),
                    ),
                    const SizedBox(width: 4),
                    Icon(
                      Icons.chevron_right,
                      size: 12,
                      color: Colors.white,
                    ),
                  ],
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }

  Widget _buildMembershipStat(String value, String label) {
    return Column(
      children: [
        Text(
          value,
          style: const TextStyle(
            fontSize: 24,
            fontWeight: FontWeight.bold,
            color: Colors.white,
          ),
        ),
        const SizedBox(height: 4),
        Text(
          label,
          style: TextStyle(
            fontSize: 12,
            color: Colors.white.withOpacity(0.8),
          ),
        ),
      ],
    );
  }

  Widget _buildMembershipPackages() {
    return Card(
      child: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              '会员套餐',
              style: Theme.of(context).textTheme.titleLarge,
            ),
            const SizedBox(height: 16),
            SizedBox(
              height: 320,
              child: ListView(
                scrollDirection: Axis.horizontal,
                children: [
                  _buildPackageCard(
                    title: '黄金会员',
                    price: '198',
                    period: '季度',
                    features: [
                      '每日高级运势分析',
                      '专属抄经推荐',
                      '每月3次咨询服务',
                      '咨询服务8折优惠',
                    ],
                    isRecommended: true,
                    index: 0,
                  ),
                  const SizedBox(width: 16),
                  _buildPackageCard(
                    title: '钻石会员',
                    price: '498',
                    period: '年',
                    features: [
                      '黄金会员所有特权',
                      '每月5次咨询服务',
                      '咨询服务6折优惠',
                      '专属客服一对一服务',
                    ],
                    isRecommended: false,
                    index: 1,
                  ),
                ],
              ),
            ),
            const SizedBox(height: 16),
            Center(
              child: GestureDetector(
                onTap: () {
                  // 查看更多会员套餐逻辑
                },
                child: Text(
                  '查看更多会员套餐 >',
                  style: TextStyle(
                    fontSize: 14,
                    color: AppTheme.subtitleColor,
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildPackageCard({
    required String title,
    required String price,
    required String period,
    required List<String> features,
    required bool isRecommended,
    required int index,
  }) {
    final isSelected = _selectedPackageIndex == index;
    
    return Container(
      width: 200,
      padding: const EdgeInsets.all(16),
      decoration: BoxDecoration(
        border: Border.all(
          color: isSelected ? AppTheme.primaryColor : AppTheme.dividerColor,
          width: isSelected ? 2 : 1,
        ),
        borderRadius: BorderRadius.circular(12),
        color: isSelected ? AppTheme.secondaryColor.withOpacity(0.3) : Colors.white,
      ),
      child: Stack(
        children: [
          if (isRecommended)
            Positioned(
              top: -10,
              right: -10,
              child: Container(
                padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
                decoration: BoxDecoration(
                  color: AppTheme.primaryColor,
                  borderRadius: BorderRadius.circular(12),
                ),
                child: const Text(
                  '推荐',
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 12,
                  ),
                ),
              ),
            ),
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                title,
                style: TextStyle(
                  fontSize: 18,
                  fontWeight: FontWeight.bold,
                  color: isSelected ? AppTheme.primaryColor : AppTheme.textColor,
                ),
              ),
              const SizedBox(height: 8),
              RichText(
                text: TextSpan(
                  text: '¥$price',
                  style: TextStyle(
                    fontSize: 24,
                    fontWeight: FontWeight.bold,
                    color: isSelected ? AppTheme.primaryColor : AppTheme.textColor,
                  ),
                  children: [
                    TextSpan(
                      text: '/$period',
                      style: TextStyle(
                        fontSize: 14,
                        fontWeight: FontWeight.normal,
                        color: AppTheme.lightTextColor,
                      ),
                    ),
                  ],
                ),
              ),
              const SizedBox(height: 16),
              ...features.map((feature) => Padding(
                padding: const EdgeInsets.only(bottom: 8.0),
                child: Row(
                  children: [
                    Icon(
                      Icons.check,
                      size: 16,
                      color: const Color(0xFF52C41A),
                    ),
                    const SizedBox(width: 8),
                    Expanded(
                      child: Text(
                        feature,
                        style: const TextStyle(
                          fontSize: 14,
                        ),
                      ),
                    ),
                  ],
                ),
              )),
              const Spacer(),
              SizedBox(
                width: double.infinity,
                child: ElevatedButton(
                  onPressed: () {
                    setState(() {
                      _selectedPackageIndex = index;
                    });
                    // 续费或升级逻辑
                  },
                  style: ElevatedButton.styleFrom(
                    backgroundColor: isSelected ? AppTheme.primaryColor : const Color(0xFFF5F5F5),
                    foregroundColor: isSelected ? Colors.white : AppTheme.textColor,
                  ),
                  child: Text(isSelected ? '立即续费' : '升级会员'),
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }

  Widget _buildPointsRecharge() {
    return Card(
      child: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              '福报充值',
              style: Theme.of(context).textTheme.titleLarge,
            ),
            const SizedBox(height: 16),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                const Text(
                  '当前福报值',
                  style: TextStyle(
                    fontSize: 16,
                    fontWeight: FontWeight.bold,
                  ),
                ),
                Text(
                  '128',
                  style: TextStyle(
                    fontSize: 16,
                    fontWeight: FontWeight.bold,
                    color: AppTheme.primaryColor,
                  ),
                ),
              ],
            ),
            const SizedBox(height: 8),
            ClipRRect(
              borderRadius: BorderRadius.circular(4),
              child: LinearProgressIndicator(
                value: 0.6,
                backgroundColor: const Color(0xFFF5F5F5),
                valueColor: AlwaysStoppedAnimation<Color>(AppTheme.primaryColor),
                minHeight: 8,
              ),
            ),
            const SizedBox(height: 4),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Text(
                  '0',
                  style: TextStyle(
                    fontSize: 12,
                    color: AppTheme.lightTextColor,
                  ),
                ),
                Text(
                  '200 (下一等级)',
                  style: TextStyle(
                    fontSize: 12,
                    color: AppTheme.lightTextColor,
                  ),
                ),
              ],
            ),
            const SizedBox(height: 20),
            GridView.count(
              crossAxisCount: 3,
              shrinkWrap: true,
              physics: const NeverScrollableScrollPhysics(),
              mainAxisSpacing: 12,
              crossAxisSpacing: 12,
              childAspectRatio: 1.5,
              children: [
                _buildPointsOption('50福报', '¥50', 0),
                _buildPointsOption('100福报', '¥88', 1, originalPrice: '¥100'),
                _buildPointsOption('200福报', '¥168', 2),
                _buildPointsOption('500福报', '¥398', 3),
                _buildPointsOption('1000福报', '¥698', 4),
                _buildCustomPointsOption(),
              ],
            ),
            const SizedBox(height: 20),
            CustomButton(
              text: '确认充值',
              onPressed: () {
                // 充值逻辑
                ScaffoldMessenger.of(context).showSnackBar(
                  const SnackBar(
                    content: Text('充值成功'),
                    backgroundColor: AppTheme.primaryColor,
                  ),
                );
              },
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildPointsOption(String points, String price, int index, {String? originalPrice}) {
    final isSelected = _selectedPointsIndex == index;
    
    return GestureDetector(
      onTap: () {
        setState(() {
          _selectedPointsIndex = index;
        });
      },
      child: Container(
        decoration: BoxDecoration(
          border: Border.all(
            color: isSelected ? AppTheme.primaryColor : AppTheme.dividerColor,
            width: isSelected ? 2 : 1,
          ),
          borderRadius: BorderRadius.circular(8),
          color: isSelected ? AppTheme.secondaryColor.withOpacity(0.3) : Colors.white,
        ),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              points,
              style: TextStyle(
                fontSize: 16,
                fontWeight: FontWeight.bold,
                color: isSelected ? AppTheme.primaryColor : AppTheme.textColor,
              ),
            ),
            const SizedBox(height: 4),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text(
                  price,
                  style: TextStyle(
                    fontSize: 14,
                    color: AppTheme.primaryColor,
                  ),
                ),
                if (originalPrice != null)
                  Text(
                    ' $originalPrice',
                    style: TextStyle(
                      fontSize: 12,
                      color: AppTheme.lightTextColor,
                      decoration: TextDecoration.lineThrough,
                    ),
                  ),
              ],
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildCustomPointsOption() {
    return GestureDetector(
      onTap: () {
        // 自定义充值逻辑
      },
      child: Container(
        decoration: BoxDecoration(
          border: Border.all(color: AppTheme.dividerColor),
          borderRadius: BorderRadius.circular(8),
        ),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text(
              '自定义',
              style: TextStyle(
                fontSize: 16,
                fontWeight: FontWeight.bold,
              ),
            ),
            const SizedBox(height: 4),
            Icon(
              Icons.add,
              color: AppTheme.subtitleColor,
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildPointsHistory() {
    return Card(
      child: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              '福报使用记录',
              style: Theme.of(context).textTheme.titleLarge,
            ),
            const SizedBox(height: 16),
            _buildHistoryItem(
              title: '购买《太上感应篇》高级解析',
              points: -30,
              date: '2023-06-08 15:30',
            ),
            const Divider(),
            _buildHistoryItem(
              title: '充值福报',
              points: 100,
              date: '2023-06-05 10:15',
            ),
            const Divider(),
            _buildHistoryItem(
              title: '事业咨询服务',
              points: -50,
              date: '2023-06-01 14:20',
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildHistoryItem({
    required String title,
    required int points,
    required String date,
  }) {
    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 8.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text(
                title,
                style: const TextStyle(
                  fontSize: 14,
                ),
              ),
              Text(
                '${points > 0 ? '+' : ''}$points福报',
                style: TextStyle(
                  fontSize: 14,
                  color: points > 0 ? const Color(0xFF52C41A) : const Color(0xFFF5222D),
                  fontWeight: FontWeight.bold,
                ),
              ),
            ],
          ),
          const SizedBox(height: 4),
          Text(
            date,
            style: TextStyle(
              fontSize: 12,
              color: AppTheme.lightTextColor,
            ),
          ),
        ],
      ),
    );
  }
} 